<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .container {
                position: fixed;
                width: 100vw;
                height: 100vh;
                background-color: rgb(32, 32, 32);
                display: flex;
                flex-wrap: wrap;
            }
            .item {
                width: 5vw;
                height: 5vh;
                background-color: white;
                animation: move 1.5s ease-in-out forwards;
                opacity: 0;
                overflow: hidden;
            }
            .container div:nth-of-type(3n) {
                animation: move 1s ease-in-out forwards;
            }
            .container div:nth-of-type(3n + 2) {
                animation: move 2s ease-in-out forwards;
            }
            @keyframes move {
                0% {
                    opacity: 0;
                    transform: scale(0) translateY(1000px);
                    border-radius: 50%;
                }
                100% {
                    opacity: 1;
                    transform: scale(1) translateY(0);
                    background-image: url('1.jpg');
                    /* background-position: center; */
                    background-attachment: fixed;
                    background-size: cover;
                    border-radius: 0;
                }
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item"></div>
        </div>
        <script>
            // 获取元素
            var container = document.querySelector('.container');
            var items = document.getElementsByClassName('item');

            for (let i = 1; i < 400; i++) {
                // 创建小方块div
                container.innerHTML += "<div class='item'></div>";
                //设置css样式设置动画延迟
                items[i].style.cssText = `animation-delay: ${i * 0.05}s;`;
            }
            /* 
            var a = document.createElement("div");
            a.classList.add("item");
            container.appendChild(a); 
            */
           
            // 注意不能用querySelectorAll获取全部小方块，因为得到的是一个静态列表，它不会对dom结构进行动态查询，不会再次重新获取。
            // getElementsByClassName是动态查询的过程，会随着dom结构的变化，得到的结点列表也会发生变化。
        </script>
    </body>
</html>
